import * as React from 'react';
    import { useState, useMemo, useRef } from 'react';
    import DrawerPro from '@/components/DrawerPro';
    import AutoTable from '@/components/AutoTable';
    import PremButton from '@/components/PremButton';
    import getcolumns from './columns';
    import { useRequest } from 'ahooks';
    import { doFetch } from '@/utils/doFetch';

    function Zll(props) {
      const actionRef = useRef(),
        formRef = useRef();
      const [drawer, setdrawer] = useState({
          open: false,
        }),
        [activeTabKey, setactiveTabKey] = useState(1);

      const { run, loading } = useRequest(doFetch, {
        manual: true,
        onSuccess: (res, params) => {
          if (res?.code == '0000') {
            actionRef?.current?.reload();
            setdrawer((s) => ({
              ...s,
              open: false,
            }));
          }
        },
      });

      const columns = useMemo(() => {
        let defcolumn = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.columns;
        let defpath = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.pathconfig ?? {};
        return defcolumn;
      }, [activeTabKey]);

      const pathconfig = useMemo(() => {
        let defpath = getcolumns(setdrawer).filter((it) => it.key == activeTabKey)[0]?.pathconfig ?? {};
        return defpath;
      }, [activeTabKey]);

      const detail = (text, row, _, action) => {
        return (
          pathconfig.enabledetail && (
            <PremButton
              btn={{
                size: 'small',
                type: 'link',
                onClick: () => {
                  setdrawer((s) => ({
                    ...s,
                    open: true,
                    item: row,
                    val: 'detail',
                    title: '详细信息',
                  }));
                },
              }}
            >
              详情
            </PremButton>
          )
        );
      };

      const edit = (text, row, _, action) => {
        return (
          pathconfig.enableedit && (
            <PremButton
              btn={{
                size: 'small',
                onClick: () => {
                  setdrawer((s) => ({
                    ...s,
                    open: true,
                    item: row,
                    title: '编辑',
                    val: 'edit',
                  }));
                },
              }}
            >
              编辑
            </PremButton>
          )
        );
      };

      const remove = (text, row, _, action) => {
        return (
          pathconfig.enableedit && (
            <PremButton
              pop={{
                title: '是否删除?',
                okText: '确认',
                cancelText: '取消',
                onConfirm: () => {
                  run({ url: pathconfig?.delete || '/delete', params: { id: row?.id } });
                },
              }}
              btn={{
                size: 'small',
                type: 'danger',
              }}
            >
              删除
            </PremButton>
          )
        );
      };

      return (
        <div style={{ position: 'relative' }}>
          <AutoTable
            pagetitle="左玲玲"
            path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
            actionRef={actionRef}
            pageextra={pathconfig?.enableadd ? 'add' : null}
            resizeable={true}
            addconfig={{
              // access: 'sysDepartment_save',
              btn: {
                disabled: false,
                onClick: () => {
                  setdrawer((s) => ({
                    ...s,
                    open: true,
                    item: null,
                    title: '新增',
                    val: 'add',
                  }));
                },
              },
            }}
            tabList={getcolumns(detail, edit, remove)}
            activeTabKey={activeTabKey}
            onTabChange={(key) => {
              setactiveTabKey(key);
            }}
          />

          <DrawerPro
            fields={columns}
            detailpath={pathconfig?.detail || null}
            detailData={drawer?.item}
            defaultFormValue={drawer?.item}
            params={{ id: drawer?.item?.id }}
            formRef={formRef}
            placement="right"
            onClose={() => {
              setdrawer((s) => ({
                ...s,
                open: false,
              }));
            }}
            {...drawer}
            onFinish={(vals) => {
              if (drawer?.val == 'add') {
                run({ url: pathconfig?.add || '/add', params: { ...vals } });
              } else if (drawer?.val == 'edit') {
                run({ url: pathconfig?.edit || '/edit', params: { ...vals, id: drawer?.item?.id } });
              }
            }}
          />
        </div>
      );
    }

    export default Zll;